<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>微博发布效果</title>
    <script src="./js/vue2.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .weibo {
        width: 600px;
        border: 1px solid #ccc;

        margin: 100px auto;
        padding: 10px;
      }

      .weibo-text {
        width: 590px;
        height: 140px;
        padding: 5px;
        border: 1px solid #ccc;
        outline: none;
        resize: none;
      }

      .weibo-text:focus {
        border-color: #f60;
      }

      .weibo-btn {
        width: 80px;
        height: 30px;
        background-color: #f90;
        color: #fff;
        border: 0 none;
        margin-top: 5px;
        border-radius: 3px;
        cursor: pointer;
        outline: 0 none;
      }

      .weibo-list {
        padding-top: 10px;
      }

      .weibo-list li {
        font-size: 14px;
        line-height: 30px;
        border-bottom: 1px dotted #ccc;
        overflow: hidden;
      }

      .weibo-list li p {
        float: left;
      }

      .weibo-list li span {
        float: right;
        cursor: pointer;
      }

      .weibo-list li input {
        height: 24px;
        line-height: 24px;
        width: 300px;
        font-size: 14px;
        border: 0 none;
      }
    </style>
  </head>

  <body>
    <div id="app" class="weibo">
      <textarea
        v-model="count.msg"
        @keydown.enter="add"
        v-myfocus
        v-color='"red"'
        class="weibo-text"
      ></textarea>
      <input @click="add" class="weibo-btn" value="发布" type="button" />
      <ul class="weibo-list">
        <li v-for="(item,index) in list" :key="index">
          <p>{{ item.msg }}</p>
          <pre></pre>
          <p>{{ item.time|timer() }}</p>
          <span @click="delet(index)">删除</span>
        </li>
      </ul>
    </div>
    <script>
      //  自定义指令,焦点聚集
      Vue.directive("myfocus", {
        inserted(el, binding) {
          el.focus();
        }
      });
      Vue.directive("color", {
        inserted(el, binding) {
          el.style.color = binding.value;
        }
      });
      Vue.filter("timer", function(time,spc) {
        var date = new Date(time);
        var seperator1 = "/";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
      });
      var vm = new Vue({
        el: "#app",
        data: {
          list: [
            {
              msg: "当成我自云云人海之中独独看到你",
              time: new Date()
            },
            { msg: "如今我在把你重新还回人海里", time: new Date() },
            { msg: "自此流年各天涯", time: new Date() }
          ],
          count: {
            msg: "",
            time: new Date()
          },
          color: "red"
        },
        methods: {
          add() {
            this.list.push({ ...this.count });
            this.count = { msg: "", time: new Date() };
          },
          delet(id) {
            this.list.splice(id, 1);
          }
        }
      });
    </script>
  </body>
</html>
